<template>
  <div>
    <div class="provider-list">
      <div class="content" v-if="!loading">
        <div class="container">
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">品牌信息</span>
            </div>
            <el-button @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="body">
            <div class="flex info">
              <p>
                <span class="title">品牌名称：</span
                >{{ detail.pinpaimingcheng }}
              </p>
              <p>
                <span class="title">一级类型：</span>{{ detail.pinpaifenlei1 }}
              </p>
              <p>
                <span class="title">二级类型：</span>{{ detail.pinpaifenlei2 }}
              </p>
              <p>
                <span class="title">三级类型：</span>{{ detail.pinpaifenlei3 }}
              </p>
              <p class="mt40">
                <span class="title">品牌编号：</span>{{ detail.ppNo }}
              </p>
              <p class="mt40">
                <span class="title">合作期限：</span>{{ detail.hezuoqixian }}
              </p>
              <p class="mt40">
                <span class="title">招商状态：</span>{{ detail.zhaoshang }}
              </p>
              <p class="mt40">
                <span class="title">创建时间：</span
                >{{ detail.chuangjianshijian }}年
              </p>
              <p class="mt40">
                <span class="title">品牌供应商：</span
                >{{ detail.pinpaigongyingshang }}
              </p>
              <p class="mt40">
                <span class="title">国籍：</span>{{ detail.guoji }}
              </p>
              <p class="mt40">
                <span class="title">品牌档次：</span>{{ detail.pinpaidangci }}
              </p>
              <p class="mt40">
                <span class="title">品牌联系人：</span>{{ detail.lianxiren }}
              </p>
              <p class="mt40">
                <span class="title">联系方式/账号：</span
                >{{ detail.lianxifangshi }}
              </p>
              <p class="mt40">
                <span class="title">密码：</span>{{ detail.mima }}
              </p>
            </div>
            <div class="intro-img flex">
              <div
                class="show-box"
                v-for="(item, index) in detail.pinpaitupian"
                :key="index"
              >
                <img
                  v-if="item.fileType != 'mp4'"
                  :src="item.filePath"
                  alt=""
                />
                <video controls v-else :src="item.filePath"></video>
              </div>
            </div>
            <div class="flex">
              <p><span class="title">收藏数: </span>{{ detail.shoucangshu }}</p>
            </div>
            <div class="mt40 excel">
              <p class="title">介绍图</p>
              <img
                v-if="detail.jieshaotu && detail.jieshaotu.length"
                class="mt20"
                style="max-width: 200px"
                :src="detail.jieshaotu[0].filePath"
                alt=""
              />
            </div>
            <div class="flex mt40">
              <p style="width: 50%">
                <span class="title">备注：</span>{{ detail.beizhu }}
              </p>
            </div>
            <div class="mt40 excel">
              <span class="title">审核状态：</span>
              <span class="intro">{{
                detail.shenhe.code == 1
                  ? "已通过"
                  : detail.shenhe.code == -1
                  ? "未通过"
                  : "待审核"
              }}</span>
            </div>
          </div>
        </div>
        <div class="providerTable">
          <el-tabs
            @tab-click="tabChange"
            v-model="activeName"
            class="provider-tabs"
          >
            <el-tab-pane class="achievement" label="品牌概况" name="1">
              <div v-html="detail.pinpaixiangqing"></div>
              <div
                v-if="detail.shenhe.code == 0 && check === '1'"
                class="operation flex-s"
              >
                <el-button @click="review(1)" size="large">通过</el-button>
                <el-button
                  class="ml50"
                  @click="review(-1)"
                  size="large"
                  type="primary"
                  >不通过</el-button
                >
              </div>
              <el-dialog
                class="list-dialog"
                show-close="false"
                width="40%"
                v-model="show"
                center
                style="padding: 0 30px"
              >
                <el-form :model="form">
                  <el-form-item label="不通过原因：">
                    <el-input
                      v-model="form.shenheBeizhu"
                      :maxlength="150"
                      type="textarea"
                      :rows="8"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form-item class="note-button-group">
                  <el-button size="large" @click="show = false">取消</el-button>
                  <el-button
                    class="ml50"
                    size="large"
                    type="primary"
                    @click="submitForm"
                  >
                    提交
                  </el-button>
                </el-form-item>
              </el-dialog>
            </el-tab-pane>
            <el-tab-pane class="achievement" label="合作项目" name="2">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入内容"
                    v-model="projectParams.xiangmumingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetProjectList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    width="150"
                    show-border
                    class="ml20"
                    v-model="projectParams.xiangmuleixing"
                    size="large"
                    placeholder="类型"
                    clearable
                    @change="GetProjectList"
                  >
                    <el-option
                      v-for="item in projectType"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    >
                      {{ item.dicLabel }}
                    </el-option>
                  </el-select>
                </div>
                <div class="right">
                  <el-button
                    type="primary"
                    @click="onOperation({}, 'projectAdd')"
                    size="large"
                    >添加项目</el-button
                  >
                </div>
              </div>
              <el-table
                border
                :data="projectList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="xmNo" label="编号" align="center" />
                <el-table-column
                  width="300"
                  property="xiangmumingcheng"
                  label="项目名称"
                  align="center"
                />
                <el-table-column
                  property="chengshi"
                  label="城市（省市区）"
                  align="center"
                />
                <el-table-column
                  property="xiangmuleixing"
                  label="类型"
                  align="center"
                />
                <el-table-column
                  property="xiangmudizhi"
                  label="项目地址"
                  align="center"
                />
                <el-table-column
                  property="zhuangtai"
                  label="项目状态"
                  align="center"
                />
                <el-table-column
                  property="yunyingshang"
                  label="项目运营商"
                  align="center"
                />
                <el-table-column
                  property="xiangmufuzeren"
                  label="项目负责人"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'projectDetail')"
                      >详情</el-button
                    >
                    <el-button
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'projectDelete')"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="projectTotal"
                v-model:curr-page="projectParams.current"
                :size="projectParams.size"
                :total="projectTotal"
                @change="GetProjectList"
              />
            </el-tab-pane>
            <!-- <el-tab-pane class="commentInfo" label="品牌点评" name="3">
              <div class="principal">
                <div class="principalTable">
                  <div
                    class="principal-list"
                    v-for="(item, index) in commentList"
                    :key="index"
                  >
                    <div class="introduction">
                      <div
                        class="avatar"
                        v-if="
                          item.zhuanjiazhaopian && item.zhuanjiazhaopian.length
                        "
                      >
                        <img :src="item.zhuanjiazhaopian[0].filePath" alt="" />
                      </div>
                      <div class="intro-right comment">
                        <div class="right-head flex-b">
                          <span class="title">{{
                            item.zhuanjiamingcheng
                          }}</span>
                          <span
                            v-if="item?.renzhengjiav?.code == 1"
                            class="title ml10"
                            style="color: #159bd5"
                            >认证V</span
                          >
                        </div>
                        <p class="mt15">{{ item.yewuleixing }}</p>
                      </div>
                    </div>
                    <p class="time">{{ item.createTime }}</p>
                    <div class="comment-button flex-b mt20">
                      <p class="title">{{ item.liuyanneirong }}</p>
                      <div class="button-group">
                        <el-button
                          style="min-width: 80px"
                          size="small"
                          type="primary"
                          @click="onOperation({ id: item.id }, 'addTop')"
                          >{{
                            item?.zhiding?.code == 1 ? "取消置顶" : "置顶"
                          }}</el-button
                        >
                        <el-button
                          style="min-width: 80px"
                          size="small"
                          type="primary"
                          @click="onOperation({ id: item.id }, 'addV')"
                          >{{
                            item?.renzhengjiav?.code == 1 ? "取消加V" : "加V"
                          }}</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <h-page
                v-if="total"
                v-model:curr-page="params.current"
                :size="params.size"
                :total="total"
                @change="GetList"
              />
            </el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import {
  GetBrandDetail,
  ReviewBrand,
  GetBrandProjectList,
  DeleteBrandProject,
  GetBrandCommentList,
  AddTopBrandCommentList,
  AddVBrandCommentList,
} from "@/api/brand";
import { useRoute, useRouter } from "vue-router";
import { baseMsg, elMessageTip } from "@/utils/utils";
import { GetDictionaryTree } from "@/api/system";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      detail: {},
      activeName: "1",
      loading: true,
      show: false,
      check: localStorage.getItem("check"),
      // 审核表单
      form: {
        id: "",
        shenheBeizhu: "",
        shenhe: null,
      },

      // 合作项目
      projectParams: {
        current: 1,
        size: 10,
        ppNo: "",
        xiangmumingcheng: "",
        xiangmuleixing: "",
      },
      projectType: [],
      projectList: [],
      projectTotal: 0,

      // 品牌点评
      commentList: [],
    });
    const GetList = () => {
      state.loading = true;
      GetBrandDetail({
        id: route.query.id || Number(localStorage.getItem("loginId")),
      }).then((res) => {
        if (res.code == 4201) {
          state.detail = res.data;
        }
        state.loading = false;
      });
    };
    // 审核通过/不通过
    const review = (status) => {
      state.form.id = state.detail.id;
      state.form.shenhe = status;
      if (status === -1) {
        state.show = true;
      } else {
        ReviewBrand(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("操作成功");
            router.go(-1);
          }
        });
      }
    };
    // 审核不通过原因提交
    const submitForm = () => {
      ReviewBrand(state.form).then((res) => {
        if (res.code == 4202) {
          baseMsg("操作成功");
          router.go(-1);
        }
      });
    };
    // 获取合作项目列表
    const GetProjectList = () => {
      GetBrandProjectList(state.projectParams).then((res) => {
        if (res.code == 4201) {
          state.projectList = res.data.records;
          state.projectTotal = res.data.total;
        }
      });
    };
    // 获取点评列表
    const GetCommentList = () => {
      GetBrandCommentList({ ppNo: state.detail.ppNo }).then((res) => {
        if (res.code == 4201) {
          state.commentList = res.data;
        }
      });
    };
    // tab栏切换
    const tabChange = (item) => {
      if (item.props.name == "1") {
        // GetList();
      }
      if (item.props.name == "2") {
        state.projectParams.ppNo = state.detail.ppNo;
        // 获取品牌项目分类
        GetDictionaryTree({ dicModel: "xiangmuleixing" }).then((res) => {
          if (res.code == 4201) {
            state.projectType = res.data;
          }
        });
        GetProjectList();
      }
      if (item.props.name == "3") {
        GetCommentList();
      }
    };
    const onOperation = (params, operation) => {
      if (operation === "projectDetail") {
        router.push({
          path: `/xiangmu/detail`,
          query: {
            id: params.xmId,
          },
        });
      }
      if (operation === "projectDelete") {
        elMessageTip({
          ok() {
            DeleteBrandProject({
              id: params.id,
            }).then((res) => {
              if (res.code == 4202) {
                GetProjectList();
                baseMsg("删除成功");
              }
            });
          },
        });
      }
      if (operation === "projectAdd") {
        router.push({
          path: "/pinpai/addProject",
          query: {
            ppNo: state.detail.ppNo,
          },
        });
      }
      // 置顶
      if (operation === "addTop") {
        AddTopBrandCommentList(params).then((res) => {
          if (res.code == 4202) {
            GetCommentList();
            baseMsg("操作成功");
          }
        });
      }
      // 加V
      if (operation === "addV") {
        AddVBrandCommentList(params).then((res) => {
          if (res.code == 4202) {
            GetCommentList();
            baseMsg("操作成功");
          }
        });
      }
    };
    watch(
      () => route.query,
      () => {
        state.projectParams.current = Number(route.query.page) || 1;
        GetProjectList();
      },
      { deep: true }
    );
    GetList();
    return {
      ...toRefs(state),
      GetList,
      onOperation,
      review,
      submitForm,
      GetProjectList,
      tabChange,
      GetCommentList,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
  .container {
    padding: 50px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }
  }
  .certification {
    img {
      border-radius: 4px;
      &:not(:first-child) {
        margin-left: 20px;
      }
    }
  }
}

.intro-img {
  .show-box {
    &:not(:first-child) {
      margin-left: 20px;
    }
    img,
    video {
      width: 140px;
      height: 80px;
      border-radius: 4px;
    }
  }
}

.principal {
  margin-top: 30px;
  .principalTable {
    margin-top: 15px;
    margin-bottom: 30px;
    border-radius: 6px;
    padding: 0 40px 0 15px;
    border: 1px solid #ccc;
    .principal-list {
      &:not(:last-child) {
        border-bottom: 1px solid #ccc;
      }
      position: relative;
      padding: 20px 0;
      .introduction {
        display: flex;
        .avatar {
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ccc;
          }
        }
        .intro-right {
          margin-left: 10px;
          font-size: 12px;
        }
      }
      .deleteButton {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
      }
      .time {
        position: absolute;
        right: 50px;
        top: 20px;
      }
    }
  }
}
.title {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}
.operation {
  margin-top: 70px;
}
.flex {
  display: flex;
  margin-bottom: 30px;
}
p {
  font-size: 12px;
  color: #333333;
}
.body {
  padding-right: 100px;
  .avatar {
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .info {
    flex-wrap: wrap;
    p {
      width: 25%;
    }
  }
  .certificationImg {
    img {
      margin-top: 20px;
      width: 120px;
      height: 100px;
    }
  }
  .excel {
    max-width: 400px;
    .intro {
      color: #333;
      font-size: 12px;
    }
  }
}
.bottom {
  background-color: #ccc;
  height: 1px;
}
.providerTable {
  padding: 20px 50px 50px 50px;
  .provider-tabs {
    position: relative;
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 1px;
      background-color: #e4e4e4;
      top: -20px;
      left: 0;
    }
  }
}
.principalInfo {
  position: relative;
  .addPrincipal {
    position: absolute;
    right: 50px;
    top: -20px;
  }
  .principal {
    margin-top: 30px;
    .principalTable {
      margin-top: 15px;
      margin-bottom: 30px;
      border-radius: 6px;
      padding: 0 40px 0 15px;
      border: 1px solid #ccc;
      .principal-list {
        &:not(:last-child) {
          border-bottom: 1px solid #ccc;
        }
        position: relative;
        padding: 20px 0;
        .introduction {
          display: flex;
          .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ccc;
          }
          .intro-right {
            margin-left: 10px;
            font-size: 12px;
          }
        }
        .deleteButton {
          position: absolute;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.achievement {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.comment {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
<style lang="scss">
.el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
